<template>
	<div class="common-layout">
		<el-container>
			<el-header class="header">
				<el-row :gutter="20">
					<el-col :span="3"></el-col>
					<el-col :span="17"></el-col>
					<el-col :span="2">
						<el-dropdown v-if="user.isLogin">
							<span class="el-dropdown-link" style="color:#fdfdfe;font-size: 16px;padding-top: 10px;">用户名：{{ user.userInfo.username}}</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item @click="lougt">退出登录</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</el-col>
				</el-row>
			</el-header>
			<el-container>
				<el-aside class="aside">
					<el-scrollbar>
						<el-menu router default-active="/">
							<el-menu-item  index="/"><span>首页</span></el-menu-item>
							<el-menu-item  index="/item"><span>论文管理</span></el-menu-item>
							<el-menu-item  index="/user"><span>用户管理</span></el-menu-item>
							<el-menu-item index="/menu" ><span>菜单管理</span></el-menu-item>
						</el-menu>
					</el-scrollbar>
				</el-aside>
				<el-main class="main">
					<div style="padding: 10px 10px ">
						<router-view />
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
	<login-components></login-components>
</template>
<script setup lang="ts">
import { userStore } from '~/stores/userStore'

const user = userStore()
/**
 * 判断用户是否登录
 */
const isUserLogin = () => {
	if (user.isLogin) {
		return
	}
	//打开弹窗
	user.isLoginDialog = true
}

const lougt = () => {
	user.isLogin = false
	user.isLoginDialog = true
	user.userInfo = {}
}

onBeforeMount(() => {
	isUserLogin()
})
</script>
<style scoped>
.common-layout {
	width: 100%;
	height: 100vh;
	background-color: #e3e7f1;

	.header {
		height: 50px;
		background-color: #323f57;
		color: white;
	}

	.aside {
		width: 200px;
		height: calc(100vh - 50px);
		background-color: #fdfdfe;
	}

	.main {
		width: 95%;
		background-color: #fdfdfe;
		background-clip: content-box;
	}
}
</style>
